<template>
  <div class="pan-main-search-content">
    <el-input
      class="pan-main-search"
      v-model="searchKey"
      placeholder="请输入内容"
      size="small"
      @keyup.enter.native="doSearch"
      @focus="querySearchHistory"
      @select="handleSelect"
    >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <div class="list" v-if="list.length > 0">
      <el-scrollbar style="height: 300px">
        <ul>
          <li v-for="item in list">
            <a href="javascript:void(0)" @click="handleSelect(item)">{{
              item.value
            }}</a>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import userService from '../../api/user'
import fileService from '../../api/file'
import { mapMutations, mapGetters, mapActions } from 'vuex'

export default {
  name: 'Search',
  components: {},
  props: {},
  data() {
    return {
      searchKey: '',
      list: [],
    }
  },
  methods: {
    ...mapMutations({
      reloadFileList: 'file/setFileList',
      resetFileTypes: 'file/setFileTypes',
      chanPage: 'navbar/changeNavBar',
      addBreadCrumbItem: 'breadcrumb/addItem',
      clearBreadCrumb: 'breadcrumb/clear',
      setSearchFlag: 'file/setSearchFlag',
      refreshParentId: 'file/refreshFileParentId',
      resetSearchKey: 'file/setSearchKey',
      setSearchShow: 'file/setSearchShow',
    }),
    ...mapActions({
      reloadFileList2: 'file/loadFileList',
    }),
    querySearchHistory() {
      let _this = this
      userService.searchHistories(
        (res) => {
          // cb(res.data)
          this.list = res.data
        },
        (res) => {
          _this.$message.error(res.message)
        }
      )
    },
    doSearch() {
      let _this = this
      // 设置FileTypes
      _this.resetFileTypes('-1')
      // 设置搜索模式
      _this.setSearchFlag(true)
      // 跳转到Files页面
      _this.chanPage('Files')
      // 缓存搜索关键字
      _this.resetSearchKey(_this.searchKey)
      if (_this.searchKey) {
        fileService.search(
          {
            keyword: _this.searchKey,
            fileTypes: '-1',
          },
          (res) => {
            _this.clearBreadCrumb()
            _this.addBreadCrumbItem({
              id: _this.defaultParentId,
              name: _this.defaultParentFilename,
            })
            _this.addBreadCrumbItem({
              id: '-1',
              name: '搜索：' + _this.searchKey,
            })
            _this.setSearchShow(false)
            _this.reloadFileList(res.data)
          },
          (res) => {
            _this.$message.error(res.message)
          }
        )
      } else {
        _this.setSearchFlag(false)
        _this.clearBreadCrumb()
        _this.addBreadCrumbItem({
          id: _this.defaultParentId,
          name: _this.defaultParentFilename,
        })
        _this.setSearchShow(false)
        _this.reloadFileList2(new Array())
      }
    },
    handleSelect(item) {
      this.searchKey = item.value
      this.doSearch()
    },
  },
  computed: {
    ...mapGetters([
      'defaultParentId',
      'defaultParentFilename',
      'cacheSearchKey',
      'searchShow',
    ]),
  },
  mounted() {
    this.refreshParentId()
    this.searchKey = this.cacheSearchKey
  },
  watch: {
    searchShow: {
      handler(val) {
        if (!val) {
          this.list = []
          this.searchKey = ''
        }
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.pan-main-search-content {
  // position: absolute;
  // right: 20px;
  /* right: 70px; */
  // height: 60px;
  // padding: 20px 0 0 13px;
  z-index: 10;
  .pan-main-search {
    width: 250px;
    input {
      border-radius: 30px;
    }
  }

  .list {
    margin-top: 12px;
    :deep(.is-horizontal) {
      display: none;
    }
    :deep(.el-scrollbar__wrap) {
      overflow-x: hidden;
    }
    ul {
      li {
        a {
          display: block;
          padding: 10px 0;
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
}
</style>
